<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <button onclick="updateData()">update</button>
    <script src="lib/index.js"></script>
    <script>
        const { createRef } = mfoRef
        const data = createRef({
            text: {
                type: String,
                default() {
                    return 'test'
                }
            },
            id: {
                type: Number,
                default() {
                    return 0
                }
            }
        })

        data.watch({
            text(val) {
                console.log(val)
            },
            id(val) {
                console.log(val)
            }
        })

        data.text = 'hello!'

        const updateData = () => {
            data.id += 1
            data.text += data.id
        }

        data.update({
            id: {
                type: Number,
                default() {
                    return 10
                }
            },
            title: {
                type: String,
                default() {
                    return 'test'
                }
            }
        })

        console.log(data)

    </script>
</body>

</html>